<template>
	<view class="accounts-page pages">
		<CustomNav title="转账" :active="{textColor:'#fff'}" :is-back="true"></CustomNav>
		<view class="top-banner">
			<view class="info-item">
				<view class="name">转账给{{info.name}}</view>
				<view class="phone">电话号：{{info.phone}}</view>
			</view>
			<image :src="cloudStorage+info.faceUrl" class="faceUrl"></image>
		</view>
		<view class="info-block">
			<view class="title">转账金额</view>
			<input  v-model="acccount"  @input="inputChange" type="digit" :maxlength="6" focus="true" class="form_crl" placeholder="请输入金额" />
			<view class="btn" @click="confirm">确定</view>
		</view>
		<view class="cancel-pop" v-if="isShow">
			<view class="cancel-block">
				<view class="cancel-title">
					<view class="title">请输入支付密码</view>
					<view @click="closeShow">
						<image
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/close.png"
							mode=""></image>
					</view>
				</view>

				<view class="pop-info">
					<view class="input">
						<view class="input-item" v-for="(item,index) in 6" :key="index" :data-index="index">
							<view class="input-value">{{password[index]}}</view>
						</view>
						<input class="input-password" maxlength="6" v-model="form.paymentPassword" type="text"
							@input="setValue" password confirm-type="确认" :adjust-position="true" focus="true" />
					</view>

				</view>
				<view class="btn1" @click="userCancelOrder">确定</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getHeInfoApi,
		getTransferAccounts
	} from '@/api/accounts.js'
	import {
		validate
	} from '@/util/validate.js'
	export default {
		data() {
			return {
				info: {
					faceUrl: '',
					name: '',
					phone: ''
				},
				code: '',
				acccount: '',
				isShow: false,
				form: {
					paymentPassword: '',
				},
				rules: {
					paymentPassword: {
						name: '支付密码',
						required: true
					},
				},
				password: [],
			}
		},
		methods: {
			inputChange(e) {
				var that = this
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,1})/g)[0]) || null
			
				this.$nextTick(() => {
					that.acccount = e.target.value
				})
			},
			closeShow() {
				this.isShow = false
				this.password = ''
				this.form.paymentPassword = ''
			},
			getUser() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getHeInfoApi({
					invitationCode: this.code
				}).then((res) => {
					this.info = res
				})
			},
			setValue(e) {
				var value = e.detail.value
				this.value = value
				this.focusIndex = value.length
				this.focus = value.length < 6
				this.password = '*'.repeat(value.length)
				this.form.paymentPassword = e.detail.value
			},
			confirm() {
				uni.showModal({
					title: '提示',
					content: `确定要向其转账吗？`,
					confirmColor: '#FF2F34',
					success: (res) => {
						if (res.confirm) {
							this.isShow = true
						}
					}
				});
			},
			userCancelOrder() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let form = JSON.parse(JSON.stringify(this.form));
				if (validate(form, this.rules)) {
					getTransferAccounts({
						invitationCode: this.code,
						transferAmount: this.acccount,
						paymentPassword: form.paymentPassword
					}).then((res) => {
						if(res.mobilePhoneNumberOppositeTransferAccount)
						{
							this.isShow = false
							this.showToast('转账成功', () => {
								uni.redirectTo({
									url: '/page_other/pay/success?phone='+res.mobilePhoneNumberOppositeTransferAccount+'&price='+this.acccount
								})
							},0)
						}
						
					}).finally((res) => {
						this.password = ''
						this.form.paymentPassword = ''
					})
				}
			}
		},
		onLoad(e) {
			this.code = e.code
			this.getUser()
		}
	}
</script>

<style lang="scss" scoped>
	.accounts-page {
		.top-banner {
			width: 100%;
			background-color: #EDEDED;
			height: 450rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 40rpx;

			.info-item {
				margin-top: 70rpx;

				.name {
					font-weight: bold;
					font-size: 30rpx;
				}

				.phone {
					font-size: 28rpx;
					margin-top: 30rpx;
					color: #999;
				}
			}

			.faceUrl {
				margin-top: 70rpx;
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
			}
		}

		.info-block {
			border-radius: 30rpx;
			margin-top: -50rpx;
			background-color: #fff;
			padding: 30rpx;
			min-height: 75vh;

			.form_crl {
				height: 120rpx;
				border-bottom: 1px solid #EDEDED;
			}

			.btn {
				margin: 0 auto;
				margin-top: 30rpx;
				// transform: translate(-50%, -50%);
				// left: 50%;
				// bottom: 0rpx;
				// z-index: 999999;
				width: 460rpx;
				display: flex;
				background: linear-gradient(to right, #FF2F34, #FF6B18);
				border-radius: 60rpx;
				height: 95rpx;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
			.btn1 {
				position: fixed;
				transform: translate(-50%, -50%);
				left: 50%;
				bottom: 0rpx;
				z-index: 999999;
				width: 460rpx;
				display: flex;
				background: linear-gradient(to right, #FF2F34, #FF6B18);
				border-radius: 60rpx;
				height: 95rpx;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}

		.cancel-pop {
			position: fixed;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.2);
			z-index: 999999;
			width: 100vw;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-left: 30rpx;
			padding-right: 30rpx;

			.cancel-block {
				background: #fff;
				padding: 30rpx 40rpx;
				z-index: 99;
				height: 300rpx;
				position: fixed;
				bottom: 45%;
				box-shadow: 0 0 6px 0px #dadada;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				.cancel-title {
					display: flex;
					justify-content: space-between;

					.title {
						font-size: 34rpx;
						font-weight: bold;
					}

					image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.pop-info {
				
					margin-top: 10rpx;
					height: 100rpx;
					display: flex;
					justify-content: center;
margin-bottom: 10rpx;
					/* 密码输入框 */
					.input {
						margin-top: 10rpx;
						/* padding: 0 60rpx; */
						position: relative;
					}

					.input-item {
						
						position: relative;
						display: inline-block;
						width: 40px;
						height: 40px;
						/* border-bottom: 2rpx solid #333;*/
						/* 下划线效果*/
						background: rgba(0, 0, 0, 0.04);
						/* 灰色框效果 */
						border-radius: 4px;
					}

					.input-item:not(:first-child) {
						margin-left: 8px;
					}

					.input-value {
						
						display: inline-block;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						font-size: 28rpx;
					}

					.input-password {
						
						position: absolute;
						left: -360rpx;
						top: 0;
						height: 90rpx;
						width: 880rpx;
						/* opacity: 0; */
						/* 真机opacity 无效 */

						/* 解决真机opacity 无效的问题 */
						background-color: rgba(255, 255, 255, 0.1);
						color: rgba(255, 255, 255, 0.1);
					}

					.focus {
						width: 2rpx;
						height: 50rpx;
						background-color: #333;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}

					.show {
						display: block;
						animation: blink 1s linear infinite;
					}

					.hide {
						display: none;
					}

					@keyframes blink {

						0%,
						50% {
							opacity: 1;
						}

						50.01%,
						to {
							opacity: 0;
						}
					}

				}
				.btn1 {
					background-color: #FF2F34;
					width: 60%;
					height: 80rpx;
					border-radius: 50rpx;
					color: #fff;
					display: flex;
					margin: 0 auto;
					border-radius: 60rpx;
					justify-content: center;
					align-items: center;
					
				}
			}
		}

	}
</style>